<template>
  <span v-if="value">
    <el-image
      v-for="image in imageArray"
      :key="image"
      class="column-img"
      fit="cover"
      :lazy="false"
      :preview-src-list="[image]"
      :src="image"
    >
      <template #error>
        <span class="not-set">(图片加载失败)</span>
      </template>
    </el-image>
  </span>
  <span
    v-else
    class="not-set"
  >(暂无图片)</span>
</template>

<script>
import Vue from 'vue';
import {Image} from "element-ui";
Vue.use(Image);
export default {
  name: "ErpViewImage",
  props: {
    /**
     * 值
     * @public
     */
    value: {
      type: String,
      default: ''
    },
    /**
     * 额外配置
     * ```js
     * return {
          // 是否多图
          // multiple: true
        };
     * ```
     * @public
     */
    extra: {
      type: Object,
      default () {
        return {
          // 是否多图
          // multiple: true
        };
      }
    }
  },
  computed: {
    multiple () {
      return this.extra && this.extra.multiple === true;
    },
    imageArray () {
      let a = [];
      let value = this.value;
      let array = value ? value.split(',') : [];
      if (array.length > 0 && !this.multiple) {
        a = [array[0]];
      }
      a = array;
      return a;
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep{
    .el-image-viewer__close{
        background: #000;
        color: #fff;
    }
}
.column-img{
    width: 70px;
    height: 70px;
    border-radius: 5px;
    margin-right:10px;
    margin-top: 10px;
}
</style>
